<script setup lang="ts">
import Shark from '@/views/dashboard/Shark.vue';
import StatisticsCardVertical from '@/components/statistics-card/StatisticsCardVertical.vue';
import StatisticsCardWithImages from '@/components/statistics-card/StatisticsCardWithImages.vue';
import AnalyticsPerformance from '@/views/dashboard/AnalyticsPerformance.vue';
import Ranking from '@/views/dashboard/Ranking.vue';
import Members from '@/views/dashboard/Members.vue';
import Identity from '@/views/dashboard/Identity.vue';
import UserInfo from '@/views/dashboard/UserInfo.vue';
import ProposalVoting from '@/views/dashboard/ProposalVoting.vue';
import Reward from '@/views/dashboard/Reward.vue';
import Token from '@/views/dashboard/Token.vue';

import people9 from '@/assets/images/people/9.png';
import people10 from '@/assets/images/people/10.png';
import people11 from '@/assets/images/people/11.png';
import { dAccountInfoApi, recommendInfoApi } from '@/api/dashboard';
import { inject, ref, watch } from 'vue';
import UserStore from '@/store/UserStore';
import { formatAddress } from '@/utils/formatters';
import { useI18n } from 'vue-i18n';
import useContractHook from '@/hooks/Contract';
import { TOKEN_ABI, TOKEN_ADDRESS } from '@/utils/constants';
import useWalletHook from '@/hooks/Wallet';

// shark token
const sharkToken = ref<number>();
// sdao token
const sdaoToken = ref<number>();
const balance = ref<number>();

// 排名
const ranking = ref<number>();

const role = ref<number>();

const { t } = useI18n();

// 流动性
const fluidityOptions = ref({
  statTitle: t('message.dashboard.fluidity.title'),
  icon: 'mdi-trending-up',
  color: '#16b1ff',
  subtitle: t('message.dashboard.fluidity.subtitle'),
  statistics: 0,
  change: 'SHARK/BNB',
  chipColor: '#9155fd',
});
// 质押
const pledgeOptions = ref({
  statTitle: t('message.dashboard.pledge.title'),
  icon: 'mdi-bank',
  color: '#ffb400',
  subtitle: t('message.dashboard.pledge.subtitle'),
  statistics: 0,
  change: '',
});
// 提案总数
const proposalOptions = ref({
  statTitle: t('message.dashboard.proposal.title'),
  icon: 'mdi-label-variant-outline',
  color: '#9155fd',
  subtitle: t('message.dashboard.proposal.subtitle'),
  statistics: 0,
  change: '',
});
// 投票总数
const voteOptions = ref({
  statTitle: t('message.dashboard.vote.title'),
  icon: 'mdi-vote',
  color: '#56ca00',
  subtitle: t('message.dashboard.proposal.subtitle'),
  statistics: 0,
  change: '',
});

// 推荐人
const recommenderOptions = ref({
  statTitle: t('message.dashboard.recommender.title'),
  statistics: '',
  chipText: t('message.dashboard.recommender.subtitle'),
  avatar: people9,
  avatarWidth: '112',
});

// 下属
const subordinateOptions = ref({
  statTitle: t('message.dashboard.subordinate.title'),
  statistics: 0,
  chipText: '0 SDAO',
  avatar: people10,
  avatarWidth: '86',
});

// 团队
const teamsOptions = ref({
  statTitle: t('message.dashboard.teams.title'),
  statistics: 0,
  chipText: '0 SDAO',
  avatar: people11,
  avatarWidth: '88',
});

// 用户信息
const userOptions = ref({
  shareUrl: '', // 分享短链接
  shareCode: '', // 分享码
  subordinate: 0, // 直推人数
});

const userStore = UserStore();
const useContract = useContractHook();
const useWallet = useWalletHook();
const emitter = inject('emitter');
const { provider } = useWallet;

const fetch = async () => {
  if (userStore.token) {
    dAccountInfoApi().then((res: any) => {
      console.log('dAccountInfoApi:', res);
      fluidityOptions.value.statistics = res.sharkLp;
      sharkToken.value = res.sharkToken;
      balance.value = res.balance;
      ranking.value = res.sort;
      role.value = res.role;
      voteOptions.value.statistics = res.votes;
      proposalOptions.value.statistics = res.proposals;
    });

    recommendInfoApi().then((res: any) => {
      console.log('recommendInfoApi:', res);
      teamsOptions.value.statistics = res.teamNumber;
      teamsOptions.value.chipText = res.teamAmount + ' SDAO';
      subordinateOptions.value.statistics = res.directNumber;
      subordinateOptions.value.chipText = res.directAmount + ' SDAO';
      userOptions.value.shareUrl = res.shareUrl;
      userOptions.value.shareCode = res.shareCode;
      userOptions.value.subordinate = res.directNumber;
      if (res.upline !== null) {
        recommenderOptions.value.statistics = formatAddress(res.upline);
      }
    });
    sdaoToken.value = await useContract.getTokenBalance(
      TOKEN_ADDRESS,
      TOKEN_ABI
    );
  } else {
    // 没有登录时设置默认值
    fluidityOptions.value.statistics = 0;
    sharkToken.value = 0;
    balance.value = 0;
    sdaoToken.value = 0;
    ranking.value = 1;
    role.value = 1;
  }
};

fetch();

// @ts-ignore
emitter.on('refreshReward', async () => {
  console.log('refresh user reward');
  sdaoToken.value = await useContract.getTokenBalance(TOKEN_ADDRESS, TOKEN_ABI);
});

watch(
  () => provider.value,
  async newVal => {
    console.log('watch provider value:', newVal);
    if (newVal !== undefined) {
      sdaoToken.value = await useContract.getTokenBalance(
        TOKEN_ADDRESS,
        TOKEN_ABI
      );
      console.log('sdaoToken:', sdaoToken.value);
      await fetch();
    }
  }
);
</script>

<template>
  <div class="dashboard-wrapper h-full mx-auto">
    <!-- <v-row>
      <v-col cols="12" md="6" sm="12" class="align-self-end" order="1">
        <shark :token="sharkToken" />
      </v-col>

      <v-col cols="12" sm="6" md="3" order="2" class="align-self-end">
        <reward v-model:token="balance" />
      </v-col>

      <v-col cols="12" sm="6" md="3" order="3" class="align-self-end">
        <token v-model:token="sdaoToken" />
      </v-col>

      <v-col cols="12" md="4" sm="12" order="4">
        <analytics-performance />
      </v-col>

      <v-col cols="12" md="4" sm="6" order="5">
        <v-row class="h-full w-full flex-column" no-gutters>
          <v-col cols="12" class="pb-3 flex-1">
            <identity :role="role" class="h-full" />
          </v-col>
          <v-col cols="12" class="h-1/2 pt-3 flex-1">
            <ranking :ranking="ranking" class="h-full" />
          </v-col>
        </v-row>
      </v-col>

      <v-col cols="12" md="4" sm="6" order="6">
        <members />
      </v-col>
    </v-row> -->
    <v-row class="mt-3">
      <v-col cols="12" md="3" sm="6">
        <statistics-card-vertical
          :change="fluidityOptions.change"
          :color="fluidityOptions.color"
          :icon="fluidityOptions.icon"
          :statistics="fluidityOptions.statistics"
          :stat-title="fluidityOptions.statTitle"
          :subtitle="fluidityOptions.subtitle"
          chip-color="#9255FD"
        />
      </v-col>
      <v-col cols="12" md="3" sm="6">
        <statistics-card-vertical
          :change="pledgeOptions.change"
          :color="pledgeOptions.color"
          :icon="pledgeOptions.icon"
          :statistics="pledgeOptions.statistics"
          :stat-title="pledgeOptions.statTitle"
          :subtitle="pledgeOptions.subtitle"
          class="h-full"
        />
      </v-col>
      <v-col cols="12" md="3" sm="6">
        <statistics-card-vertical
          :change="proposalOptions.change"
          :color="proposalOptions.color"
          :icon="proposalOptions.icon"
          :statistics="proposalOptions.statistics"
          :stat-title="proposalOptions.statTitle"
          :subtitle="proposalOptions.subtitle"
          class="h-full"
        />
      </v-col>
      <v-col cols="12" md="3" sm="6">
        <statistics-card-vertical
          :change="voteOptions.change"
          :color="voteOptions.color"
          :icon="voteOptions.icon"
          :statistics="voteOptions.statistics"
          :stat-title="voteOptions.statTitle"
          :subtitle="voteOptions.subtitle"
          class="h-full"
        />
      </v-col>

      <v-col cols="12" md="4" sm="12">
        <user-info
          :share-url="userOptions.shareUrl"
          :share-code="userOptions.shareCode"
          :subordinate="userOptions.subordinate"
        />
      </v-col>
      <v-col cols="12" md="4" sm="12" order="6" order-sm="7" class="self-end">
        <v-row>
          <v-col cols="12" class="mb-6 sm:mt-6 xs:mt-6">
            <statistics-card-with-images
              :avatar="recommenderOptions.avatar"
              :avatar-width="recommenderOptions.avatarWidth"
              :chip-text="recommenderOptions.chipText"
              :statistics="recommenderOptions.statistics"
              :stat-title="recommenderOptions.statTitle"
            />
          </v-col>
          <v-col cols="12" md="6" class="sm:mb-6 xs:mb-6">
            <statistics-card-with-images
              :avatar="subordinateOptions.avatar"
              :avatar-width="subordinateOptions.avatarWidth"
              :chip-text="subordinateOptions.chipText"
              :statistics="subordinateOptions.statistics"
              :stat-title="subordinateOptions.statTitle"
              showMore
            />
          </v-col>
          <v-col cols="12" md="6" class="sm:mb-6 xs:mb-6">
            <statistics-card-with-images
              :avatar="teamsOptions.avatar"
              :avatar-width="teamsOptions.avatarWidth"
              :chip-text="teamsOptions.chipText"
              :statistics="teamsOptions.statistics"
              :stat-title="teamsOptions.statTitle"
            />
          </v-col>
        </v-row>
      </v-col>
      <v-col cols="12" md="4" order="7" sm="12" class="flex">
        <proposal-voting class="flex-1"/>
      </v-col>
    </v-row>
  </div>
</template>

<style scoped lang="scss">
.dashboard-wrapper {
  @apply relative flex flex-col p-5 xs:px-6 sm:px-20 md:px-10 lg:px-[108px] xl:px-[228px] bg-[#F4F5FA];
}

::v-deep .v-card--variant-elevated {
  box-shadow: 0 2px 10px 0 rgb(94 86 105 / 10%);
}

::v-deep .v-card {
  border-radius: 6px;
  background: white;
  overflow: visible;
}
</style>
